<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			#loginForm{
				background-color: bisque;
				text-align: center;
				width: 200px;
				height: 200px;
				font-family: "宋体";
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="loginForm">
				<h1 style="text-align: center;">用户登入</h1>
				<div>
					用户名<input type="text" v-model="username"></div>
				<div>密码:<input type="password" v-model="password" /></div>
				<div><button @clik="login">登入</button></div>
			</div>
		</div>

		<script>
			var app = Vue.createApp({
				data() {
					return {
						username: '',
						password: '',
					}
				},
				methods: {
					login: function() {
						
							console.log("login")
							if (this.username == "admin" && this.password == "234") {
								alert("登入成功")
							} else {
								alert("登入失败")
							}

						}
					}
				

			});




			var vm = app.mount("#app")
		</script>
	</body>
</html>
